<template>
  <!-- 日志查询 -->
  <el-row>
    <el-col :span="24">
      <el-card class="box-card" id="card">
        <div slot="header" class="clearfix">
          <span>日志管理</span>
          <span>-只能对日志进行查看哦。^_^</span>
        </div>

        <el-row>
          <el-col :span="12">
            <el-select
              v-model="value"
              placeholder="请选择规则"
              @change="selectValue"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="12" v-if="showSearch == true">
            <el-input
              class="search"
              placeholder="请输入查询用户名"
              v-model="form.value"
              clearable
            ></el-input>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="searchSubmit"
              circle
            ></el-button>
          </el-col>
        </el-row>

        <!-- 表单显示 -->
        <el-row
          type="flex"
          align="bottom"
          v-loading="loading"
          element-loading-text="拼命加载中"
          element-loading-background="rgb(255,255,255)"
        >
          <!-- 主体 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="日志编号">
                    <span>{{ props.row.logId }}</span>
                  </el-form-item>
                  <el-form-item label="操作">
                    <span>{{ props.row.logOperation }}</span>
                  </el-form-item>
                  <el-form-item label="操作时间">
                    <span>{{ props.row.logDate }}</span>
                  </el-form-item>
                  <el-form-item label="操作员编号">
                    <span>{{ props.row.doctorId }}</span>
                  </el-form-item>
                  <el-form-item label="操作员">
                    <span>{{ props.row.doctorName }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column label="操 作" prop="logOperation">
            </el-table-column>
            <el-table-column label="操作时间" prop="logDate"> </el-table-column>
            <el-table-column label="操作员" prop="doctorName">
            </el-table-column>
          </el-table>
        </el-row>
        <el-row type="flex" justify="center" class="pagination">
          <el-col>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              background
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      /**
       * 查询信息
       */
      form: {
        token: "",
        value: "",
        currentPage: 1,
        pageSize: 5
      },
      total: 5,
      loading: false,
      dialogVisible: false,
      tableData: [],
      showSearch: true,
      options: [
        {
          value: "selectAll",
          label: "查询所有"
        },
        {
          value: "currentUser",
          label: "查询当前用户"
        }
      ],
      value: ""
    };
  },
  methods: {
    /**
     * 提交
     */
    onSubmit() {
      this.loading = true;
      if (this.form.token == "") {
        this.selectAll();
      } else {
        this.currentUser();
      }
    },
    searchSubmit() {
      this.form.currentPage = 1;
      this.selectAll();
    },
    /**
     * 查询当前用户
     */
    currentUser() {
      this.showSearch = false;
      this.form.token = this.$store.state.userStore.token;
      this.$axios
        .post("/api/biz/log/get/", this.form)
        .then(result => {
          let data = result.data;
          if (data.code == 0) {
            this.tableData = data.data.data;
            this.total = data.data.totals;
          } else {
            this.$message.error("获取失败！");
          }

          this.loading = false;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    /**
     * 查询所有用户
     */
    selectAll() {
      this.form.token = "";
      this.$axios
        .post("/api/biz/log/search/", this.form)
        .then(result => {
          let data = result.data;
          if (data.code == 0) {
            this.tableData = data.data.data;
            this.total = data.data.totals;
          } else {
            this.$message.error("获取失败！");
          }
          this.loading = false;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    /**
     * 选择触发
     */
    selectValue() {
      this.loading = true;
      this.form.currentPage = 1;
      if (this.value == "selectAll") {
        this.showSearch = true;
        this.selectAll();
      } else if (this.value == "currentUser") {
        this.currentUser();
      }
    },
    /**
     * 显示对话框
     */
    showDialog() {
      this.dialogVisible = true;
    },

    /**
     * 分页方法
     */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize = val;
      this.onSubmit();
    },
    handleCurrentChange(val) {
      console.log(`当前页:` + val);
      this.form.currentPage = val;
      this.onSubmit();
    }
  },

  //页面初始化时执行
  mounted() {
    this.value = "selectAll";
    this.onSubmit();
  }
};
</script>

<style scoped>
#card {
  width: 100%;
  margin: 0px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  border-bottom: 1px solid #ebeef5;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  text-align: left;
}
.clearfix > span:last-child {
  color: #333333;
  font-size: 13px;
}
.clearfix > span:first-child {
  font-weight: bold;
  color: #59a6f5;
  margin-right: 20px;
}
.queryButton {
  padding-bottom: 20px;
}
.pagination {
  padding-top: 20px;
}

.el-form-item__content {
  margin-left: 100px;
  margin-right: 50px;
}
.el-select {
  width: 100%;
}
.el-dialog__body {
  padding-top: 10px;
}
.delButton {
  margin: 10px 50px;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.el-select[data-v-203ddf79] {
  width: 30%;
}
.search {
  width: 400px;
}
.el-form--inline {
  margin-left: 300px;
}
</style>
